<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="css/api.css"/>

    <style>
        html, body {
            height: 100%;
            width: 100%;
        }

        #wrap {
            height: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            flex-flow: column;
        }

        #main {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }

        #footer {
            width: 100%;
            text-align: center;
            height: 56px;
            line-height: 55px;
            background-color: #f2f2f2;
        }

        ul {

            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }

        .cloud {
            background-image: url(image/bottombtn0101.png);
        }

        .client {
            background-image: url(image/bottombtn0201.png);
        }

        .dev {
            background-image: url(image/bottombtn0301.png);
        }

        .doc {
            background-image: url(image/bottombtn0401.png);
        }

        #footer li {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            height: 55px;
        }

        .bottom_btn {
            background-position-y: 4px;
            padding-top: 16px;
            font-size: 12px;
            color: #323237;
            width: 99%;
            height: 39px;
            background-repeat: no-repeat no-repeat;
            background-position-x: center;
            background-size: 30px;
        }

        .active .cloud {
            background-image: url(image/bottombtn0102.png);
        }

        .active .client {
            background-image: url(image/bottombtn0202.png);
        }

        .active .dev {
            background-image: url(image/bottombtn0302.png);
        }

        .active .doc {
            background-image: url(image/bottombtn0402.png);
        }

        .active .bottom_btn {
            color: #6ab494;
            background-size: 30px;
        }

        .topbar {
            background: #f8285c;
            height: 50px;
            border-bottom: 1px solid #DDDFE3;
            line-height: 50px;
            text-align: center;
            display: none;
            color: #FFF;
        }

        .activebar {
            display: block;
        }
    </style>
</head>
<body>
<div id="wrap">
    <header>

        <div id="cloud" class="topbar  activebar">
        
		首页
        </div>
        <div id="client" class="topbar  ">
		
           	 九元包邮
        </div>
        <div id="dev" class="topbar ">
		
            	十九包邮
        </div>
        <div id="doc" class="topbar ">
		
         	 文章中心
        </div>
    </header>
    <div id="main">

    </div>
    <div id="footer">
        <ul>
            <li tapmode="active" class="active" onclick="randomSwitchBtn(this,'cloud',0)">            	
                <a class="bottom_btn cloud">首页</a>
            </li>

            <li tapmode="active" onclick="randomSwitchBtn(this,'client',1)">
                <a class="bottom_btn client ">九元包邮</a>
            </li>

            <li tapmode="active" onclick="randomSwitchBtn(this,'dev',2)">
                <a class="bottom_btn dev ">十九包邮</a>
            </li>
            <li tapmode="active" onclick="randomSwitchBtn(this,'doc',3)">
                <a class="bottom_btn doc ">文章中心</a>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript">
    apiready = function () {
        var $header = $api.dom('header');
        $api.fixIos7Bar($header);
        var $body = $api.dom('body');
        var $footer = $api.byId('footer');
        var header_h = $api.offset($header).h;
        var body_h = $api.offset($body).h;
        var footer_h = $api.offset($footer).h;
        var rect_h = body_h - header_h - footer_h;
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {x: 0, y: header_h, w: 'auto', h: rect_h},
            index: 0,
            frames: [
                {
                    name: 'frame1',
                    url: 'html/frame1.html'
                },
                {
                    name: 'frame2',
                    url: 'html/frame2.html'
                },
                {
                    name: 'frame3',
                    url: 'html/frame1.html'
                },
                {
                    name: 'frame4',
                    url: 'html/article_list_window.html'
                }
            ]
        }, function (ret, err) {
        });
        /*
		//调用下面的返回上一页的函数
		api.addEventListener({
                           name: 'keyback'
                        }, function(ret, err){
                           var js = 'api.historyBack(function(ret, err){if(ret.status){}else{api.closeWidget();}});';
                           api.execScript({
                                           //name:api.winName, 
                               frameName:'frame2',
                               //frameName: api.pageParam.mFrameName,
                               script:js
                           });
                        });
         */
        
        
        //左侧导航
        /*
        api.openSlidLayout({
            type: 'left',
            leftEdge: 60,
            fixedPane: {
                name: 'fixed',
                url: 'html/fixed.html'
            },
            slidPane: {
                name: 'slide',
                url: 'html/slide.html'
            }
        }, function (ret) {

        });*/
    }
    // 随意切换按钮
    function randomSwitchBtn(obj, name, index) {
        var $header = $api.dom('header');
        var $titleBar = $api.domAll($header, '.topbar');
        for (var i = 0; i < $titleBar.length; i++) {
            $api.removeCls($titleBar[i], 'activebar');
        }
        $api.addCls($api.byId(name), 'activebar');
        var $footer = $api.byId('footer');
        var $footerBar = $api.domAll($footer, 'li');
        for (var j = 0; j < $footerBar.length; j++) {
            $api.removeCls($footerBar[j], 'active');
        }
        $api.addCls(obj, 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: index
        });
        }  
      //双击退出程序
      function exitApp(){
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err){
            api.toast({
                    msg: '再按一次返回键退出'+api.appName,
                    duration:2000,
                    location: 'bottom'
                });
                
                api.addEventListener({
                    name: 'keyback'
                }, function(ret, err){
                    api.closeWidget({
                            id: 'A6960480793365',     //这里改成自己的应用ID
                            retData: {name:'closeWidget'},
                            silent:true
                        });
                });
                
                setTimeout(function(){
                        exitApp();
                },3000)
        });
	}
     
     //返回上一页
     function backup(){
     //alert('backup oen step');
     api.closeWin();
     /*
     api.addEventListener({
					   name: 'keyback'
					}, function(ret, err){
					   var js = 'api.historyBack(function(ret, err){if(ret.status){alert("历史回退");}else{api.closeWidget();}});';
					   api.execScript({
					       frameName: 'apicloud',
					       script: js
					   });
					});
	*/
     }

      
      

  
</script>
</html>